<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* v-cloak 在html属于标签内的自定义属性 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <!-- 视图层 -->
    <div id="app" v-cloak>
        <p>{{count}}</p>
        <!-- 1. 传入javascript表达式 -> 事件触发时执行对应的javascript表达式 (可以执行简单的代码逻辑,不适用于复杂的) -->
        <p>
            <button v-on:click="count++">count++</button>
        </p>

        <!-- 2. 传入一个函数 -> 事件触发时,执行对应的事件处理函数(函数中默认有一个形式参数,用于接收事件对象)
             btn.onclick = addCount;
        -->
        <p>
            <button v-on:click="addCount">count++</button>
        </p>

        <!-- 3. 传入一个函数调用 -> 事件触发时,先执行对应的事件处理函数,在调用传入的函数(此写法可以在函数自定义传入的参数,函数执行时对于接收)
             btn.onclick = function($event){
                addCount(10)
             };
        -->
        <p>
            <button v-on:click="addN(10,20,$event)">count+=10</button>
        </p>

        <!-- 4. 传入一个箭头函数 -> 事件触发时,先执行对应的事件处理函数(箭头函数),在调用传入的函数(addN)  (此写法可以自定义事件对象的形参名称) -->
        <p>
            <!-- <button v-on:click="($event)=>addN(10,20,$event)">count+=10</button> -->
            <button v-on:click="(e)=>addN(10,20,e)">count+=10</button>
        </p>
    </div>
</body>
<script>
     // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 常见指令:
    // v-html  => 在元素中输出html结构(会覆盖元素原本的内容)
    // v-text  => 在元素中输出文本结构(会覆盖元素原本的内容)
    // v-pre   => 在元素内禁用文本插值语法
    // v-cloak 等页面编译完毕再展示视图  (配合css使用)

    // v-if  条件渲染  => 根据指令的值决定元素是否渲染  true => 渲染  false=> 不渲染
    // v-show 条件展示 => 不管条件成立与否,元素都会渲染, 如果表达式结果为true,元素就会显示(display:block),false=>元素就会隐藏(display:none)

    // v-bind 属性绑定 =>  响应式地更新html属性  => 将Vue实例中的数据,放到标签内,作为标签内某个属性的属性值 (操作元素,改变元素的属性值)
    //    a:   v-bind:参数="指令值"    => 单个绑定  参数名:需要绑定的属性名   指令的值: 绑定的属性值
    //    b:   v-bind = "指令值"       => 批量绑定  指令的值是一个对象 (对象的键名:就是需要绑定的属性名,对象的键值:就是需要绑定的属性值)


    // class 和 style绑定: 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    // v-on

    // 指令的常见格式:
    // v-指令名
    // v-指令名="指令值"
    // v-指令名:参数="指令值"   
    // v-指令名:参数.修饰符="指令值"   

</script>
<script>

    // v-on  事件绑定 -> 给元素绑定事件
    // a. v-on:参数="指令值"     =>  (1) 参数名就是需要绑定的事件名  (2) 指令值的值可以是javascript表达式
    //    事件简写  v-on:简写为@  =>   v-on:click   @click


    // 页面加载时进行初始化渲染
    var app = new Vue({  // 创建Vue实例
        el: "#app",   // 挂载的元素
        data: { // 数据层 => 对应属性名将属性值 拼接到模版语法中
            count: 100,
        },
        methods: {
            addCount(e) {
                this.count++;
                console.log("事件对象", e);
            },
            addN(n,m,e) {
                console.log("n", n);
                console.log("m", m);
                console.log("e", e);
                this.count += n;
            }
        }
    })









</script>

</html>